<template>
  <el-descriptions
      class="margin-top"
      :column="2"
      :size="'default'"
      border
  >
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user/>
          </el-icon>
          姓名
        </div>
      </template>
      {{ author.firstName + '【' + author.lastName + '】' }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone/>
          </el-icon>
          邮箱
        </div>
      </template>
      {{ author.email }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <location/>
          </el-icon>
          地区城市
        </div>
      </template>
      {{ author.region + ', ' + author.city }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <location/>
          </el-icon>
          工作机构
        </div>
      </template>
      {{ author.workStation }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets/>
          </el-icon>
          orcid
        </div>
      </template>
      {{ author.orcid }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <office-building/>
          </el-icon>
          领域
        </div>
      </template>
      {{ author.domainsStr }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets/>
          </el-icon>
          录入时间
        </div>
      </template>
      {{ new Date(author.createTime).toLocaleString() }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets/>
          </el-icon>
          修改时间
        </div>
      </template>
      {{ new Date(author.modifyTime).toLocaleString() }}
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup>
import {computed, inject, ref} from 'vue'
import {Iphone, Location, OfficeBuilding, Tickets, User,} from '@element-plus/icons-vue'

const size = ref('default')
const author = inject('showAuthor')
const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})
</script>

<style scoped>
.cell-item {
  display: flex;
  align-items: center;
}

.margin-top {
  margin-top: 0;
}
</style>
